<script lang='ts' setup name='App'>
import { reactive, watch, watchEffect } from 'vue';

    const goods   = reactive({
      name:'罗技键盘',
      price:218
    })

    const cart  = reactive({
        goodsNums:10,
        discount:0.9
    })
    

    function changePrice(){
      goods.price -=5 
    }

    function changeDisCount(){
      const newDiscount = cart.discount -  0.1 ;
      cart.discount = Number(newDiscount.toFixed(2));
    }

    // const stopWatch = watch([()=>goods.price,()=>cart.discount],([price,discount])=>{
    //     // console.log("淘宝降价了， ",price,discount)
    //     if(price < 200  || discount < 0.6){
    //       console.log("上连接 买它.....")
    //       //停止watch
    //       stopWatch()
    //     }
    // })



    const stopWatch = watchEffect(()=>{
        // console.log("淘宝降价了， ",price,discount)
        if(goods.price < 200  || cart.discount < 0.6){
          console.log("第二个 写法  上连接 买它.....")
          //停止watch
          stopWatch()
        }
    })
</script>  
  
<template>  
  
  <div>商品信息:{{ goods.name }}   ，￥{{ goods.price }}</div>
  <div>购物车信息:{{ cart.goodsNums }} ，  折扣（%）：  {{ cart.discount }}</div>
  
  <div>
      <button @click="changePrice">修改商品价格</button>
      <button @click="changeDisCount">修改折扣</button>

  </div>
</template>




  
<style scoped> </style>  



